<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>

<style>
	li{list-style: none}
	#main{width: 655px;}
	#msgbox{width: 500px;min-height: 200px;height:200px;border: 1px solid green;float: left;overflow-y: scroll;padding: 10px;box-sizing: border-box;font-size: 12px;}
	#userbox{width: 150px;min-height:200px;height:200px;border: 1px solid green;float: right;overflow-y: scroll}
	#userbox li{margin: 5px;font-size: 12px;}
	#sendbox{width: 655px;min-height:100px;margin-top: 10px;border: 1px solid green;}
	#user{width: 200px;float: left}
	#sender{width: 200px;float: left}
</style>

<div>
	<div id="main">
		<div id='msgbox'></div>
		<div id='userbox'></div>
	</div>


	<div id='input'><textarea id="sendbox" placeholder="请在这里输入消息..."></textarea></div>

	<div id='user'><input id="username" placeholder="用户名"></div>
	<div id='sender'><input type="text"  id="sendTo"></div>
	<button id='sendMsg'>发送消息</button>
</div>


<body>
	<script>


	//使窗口的滚动条一直处于最下面
	function scrollWindow() {
		var ubox = document.getElementById('username')
		var mbox = document.getElementById('msgbox')
		ubox.scrollTop=10000;
		mbox.scrollTop=10000;
		setTimeout("scrollWindow()", 500);
	}
	setTimeout("scrollWindow()", 500);

	var user = window.prompt('请输入你的姓名','');

	if(user){
		websocket()
	}else{
		console.log('您没有注册用户')
		document.getElementById("sendMsg").disabled=true;
	}


	function websocket() {
		var ws = new WebSocket('ws://192.168.0.116:2347')
		console.log(ws)

		ws.onopen = function(){
			var buts 	= document.getElementById('sendMsg');   //提交按钮
			var msgbox = document.getElementById('msgbox');     //消息展示区
			var username  = document.getElementById('username').value = user;

			//登陆
			var datas = {'model':'Login','from':user,'toUid':user,'msg':'login...'}
			ws.send(JSON.stringify(datas))
			console.log('连接服务器')

			//自动刷新用户列表
			setInterval(function getnewuser()
			{
				var datas = {'model':'getList','from':user,'toUid':user,'msg':'logined'}
				ws.send(JSON.stringify(datas))
				console.log('正在刷新用户列表...')
			},2000)

			buts.onclick=function(){
				var sendData  = document.getElementById('sendbox').value;   //消息输入区

				//追加元素
				var node = document.createElement("LI");
				var text = document.createTextNode("您说=>" + sendData);
				node.appendChild(text)
				msgbox.appendChild(node)

				var sendTo = document.getElementById('sendTo').value;
				if(sendTo.length<1){sendTo='all'}
				var datas = {'model':'chat','from':username,'toUid':sendTo,'msg':sendData}

				ws.send(JSON.stringify(datas))
				console.log('send ok')
				document.getElementById('sendbox').value='';

			}

		}

		ws.onmessage= function(e){
			var username  = document.getElementById('username').value;

			//JSON化消息
			var getMsg = JSON.parse(e.data)

			console.log(getMsg)
			console.log('获取消息:' + getMsg.from,username.toString(),getMsg)


			if(getMsg.model==='connect'){
				//把用户添加到列表
				var new_user = getMsg.from

				var list =document.getElementById('userbox')
				var node = document.createElement('LI')
				var text = document.createTextNode(new_user);
				node.appendChild(text)
				list.appendChild(node)

				//接收连接服务器的消息，并展示在聊天展示区
				var node = document.createElement('LI');
				var text = document.createTextNode(getMsg.msg);
				node.appendChild(text);
				msgbox.appendChild(node)

				list.scrollTop = list.scrollHeight;

			}else if(getMsg.model==='getList'){
				console.log('用户列表'+ getMsg.list)
				var userbox =document.getElementById('userbox')

				$tmp_list = ''
				for(var i=0;i< getMsg.list.length;i++){
					var text = "<li>" + getMsg.list[i] +"</li>";
					$tmp_list+=text
				}
				userbox.innerHTML='<li>all</li>' + $tmp_list;
				getTo()

			}else{
				//接收消息
				if(getMsg.from != username.toString())
				{
					//接收聊天消息，并展示在聊天展示区
					var node = document.createElement('LI');
					var text = document.createTextNode(getMsg.from + "说=>" + getMsg.msg);
					node.appendChild(text);
					msgbox.appendChild(node)
					msgbox.scrollTop = msgbox.scrollHeight;
				}

			}

		}

		ws.onerror = function(){
			console.log('sorry~~is error')
		}

		ws.onclose = function()
		{

		}
	}

	function getTo() {
		//用户列表点击
		var user_box = document.getElementById('userbox')
		var userLi = user_box.getElementsByTagName('li')
		var user_len = userLi.length;
		console.log('LI数量',user_len)

		for(var u=0;u<user_len;u++){
			userLi[u].onclick=function () {
				var sendTo = document.getElementById('sendTo');
				//alert(this.innerText)
				sendTo.value = this.innerText
			}
		}
	}

	
	</script>
	
</body>
</html>